import {Component, EventEmitter, Input, Output, ViewEncapsulation} from "@angular/core";

@Component({
    selector:"df-num-slider",
    template:`
        <span class="df-ico-minus" [class.disabled]="!minEnable" (click)="minus()"></span>
        <label>{{num}}</label>
        <span class="df-ico-plus" [class.disabled]="!maxEnable" (click)="plus()"></span>
    `,
    styles:[
            `
            :host{
                display:flex;
                display:webkit-flex;
            }
            .disabled{
                color:var(--disable-text-color);
            }
            label{
                flex-grow:1;
                text-align:center;
                border-top:1px solid var(--borderColor);
                border-bottom:1px solid var(--borderColor);
            }
            .df-ico-minus{
                border:1px solid var(--borderColor);
                padding:0 5px;
            }
            .df-ico-plus{
                border:1px solid var(--borderColor);
                padding:0 5px;
            }
        `
    ],
    //encapsulation:ViewEncapsulation.None
})
export class NumSliderComponent{
    @Input() max:number;
    @Input() min:number=0;
    private _num:number=0;
    @Input() get num():number{
        return this._num;
    }
    set num(_num){
        this._num=Number(_num);
    }
    private _step:number=1;
    @Input() get step():number{
        return this._step;
    }
    set step(_step){
        this._step=Number(_step);
    }
    minEnable:boolean=true;//num是否允许减少
    maxEnable:boolean=true;//是否允许增加num

    ngAfterContentInit(){
        this.checkEnabled();
    }
    @Output() numChange:EventEmitter<number>=new EventEmitter<number>();

    plus(){
        if(!this.maxEnable) return;
        if(!this.step) return;
        if(this.max!=undefined && this.num+this.step>this.max){
            this.maxEnable=false;
            return;
        }
        this.num=this.num+this.step;
        this.checkEnabled();
        this.numChange.emit(this.num);
    }
    minus(){
        if(!this.minEnable) return;
        if(!this.step) return;
        if(this.min!=undefined && this.num-this.step<this.min) {
            this.minEnable=false;
            return;
        }
        this.num-=this.step;
        this.checkEnabled();
        this.numChange.emit(this.num);
    }
    checkEnabled(){
        this.maxEnable=(this.max==undefined || this.num+this.step<=this.max);
        this.minEnable=(this.min==undefined || this.num-this.step>=this.min);
    }
}
